<!--
 * @Author: ITDLCL
 * @Date: 2024-11-14 17:07:48
 * @LastEditors: ITDLCL
 * @Description:
-->
<!--
TimePeriod
时间段落
-->
<template>
  <view class="time-period border-bottom">
    <view class="time-period_groups three-line">
      <view
        class="time-period_groups_cell intel-one-mono-regular"
        v-for="item in timeList"
        :key="item"
        :class="{ grey: item.isUse == 2, 'show-border': item.id == id }"
        @click="changeTime(item)"
      >
        {{ item.timeText }}
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
let props = defineProps({
  timeList: {
    type: Array,
    default: [],
  },
  id: {
    type: Number,
    default: 0,
  },
  day: {
    type: String,
    default: "",
  },
  subIndex: {
    type: Number,
    default: 0,
  },
  index:{
	type: Number,
	default: 0,
  }
});
let emits = defineEmits(["changeTime"]);
let currentTime = ref(15);

function changeTime(item){
	if(item.isUse == 2) return;
	emits('changeTime', props.day, props.index, item.id, item.timeText, props.subIndex)
}
</script>

<style lang="scss" scoped>
.time-period {
  padding: 36rpx 28rpx;
  background-color: #ffffff;
  &_groups {
    display: grid;
    grid-template-columns: repeat(4, 130rpx);
    grid-template-rows: repeat(4, 26rpx);
    grid-row-gap: 8rpx;
    align-content: space-between;
    justify-content: space-between;
    text-align: center;
    &_cell {
      font-size: 18rpx;
      border: 2rpx solid #ffffff;
    }
    .show-border {
      border-color: #000000;
    }
    .grey {
      color: var(--grey-text);
    }
  }
  &_groups.three-line {
    grid-template-rows: repeat(3, 26rpx);
  }
}
</style>
